<template>
    <div>
        <h3>质量管理数据中心</h3>
        <el-date-picker class="choice-date" v-model="choice_date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <div class="content">
            <div class="charts-block">
                <h5>质量问题及亮点分布统计表</h5>
                <simple-bar id="left-1" :is_precent="false" class="left-1" :data="left_1"></simple-bar>
            </div><div class="charts-block">
                <h5>质量问题类型统计表</h5>
                <plato-chart id="left-2" :data="left_2" class="left-1"></plato-chart>
                <!-- <simple-bar :many_color="true" :is_line="true" id="left-2" :is_double="true" class="left-1" :is_precent="false" :data="left_2"></simple-bar> -->
            </div>
            <div>
                <h5>质量问题销项表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_data" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column property="department" label="整改责任单位"></el-table-column>
                        <el-table-column property="building" label="工程部位"></el-table-column>
                        <el-table-column show-overflow-tooltip property="description" label="问题描述"></el-table-column>
                        <el-table-column property="manager" label="整改责任人"></el-table-column>
                        <el-table-column property="deadline" label="整改期限"></el-table-column>
                        <el-table-column property="creater" label="发单人"></el-table-column>
                        <el-table-column property="status" label="整改状态"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        
            <!-- <div class="charts-block">
                <h5>质量问题整改回复率、及时率统计表</h5>
                <simple-bar :is_precent="true" id="right-1" class="left-1" :data="right_1"></simple-bar>
            </div> -->
    </div>
</template>

<script>
import SimpleBar from "@/components/charts/SimpleBar.vue";
import PlatoChart from '@/components/charts/PlatoCharts.vue';

export default {
    name: "quality-table",
    components: {
        SimpleBar,
        PlatoChart
    },
    data() {
        return {
            choice_date: ["2018-10-01", "2018-10-12"],
            left_1: {
                x: ["1号楼", "2号楼", "3号楼", "4号楼", "5号楼", "6号楼"],
                data: [[20, 15, 25, 10, 5, 3], [2, 2, 3, 4, 8, 8]],
                name: ["质量问题", "质量亮点"],
                color: ["#5ed8eb", "#649dfa"]
            },
            right_1: {
                x: [
                    "分包单位1",
                    "分包单位2",
                    "分包单位3",
                    "分包单位4",
                    "分包单位5",
                    "分包单位6"
                ],
                data: [
                    ["78", "78", "78", "78", "78", "78"],
                    ["95", "95", "95", "95", "95", "95"]
                ],
                name: ["整改回复率", "整改及时率"],
                color: ["#5ed8eb", "#649dfa"]
            },
            left_2: {
                x: ["钢筋","模板","混凝土","砌体","机电预埋","机电安装","其他"],
                data: [40, 30, 20, 10, 5, 5, 2],
                color: [
                    "#5ed8eb",
                    "#eb757f",
                    "#649dfa",
                    "#caeb5e",
                    "#5eebbc",
                    "#eb5ed8",
                    "#ebb05e"
                ]
            },
            table_data: [
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                }
            ]
        };
    },
    methods: {
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9;text-align: center;";
            } else {
                
            }
        },
        getCellStyle({row, rowIndex}) {
            return "text-align: center"
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/data.css";
h3 {
    margin-top: 20px;
}
.charts-block {
    margin-bottom: 0;
}
</style>
